<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>预算详情</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" />
<link rel="stylesheet" href="/static/ui/css/ui.css" />
</head>

<body class="pear-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md6" id="leftbox">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form" action="" id="type-from">
                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <input type="text" name="name" placeholder="名称" class="layui-input">
                            </div>
                            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit
                                lay-filter="pur-type-query">
                                <i class="layui-icon layui-icon-search"></i>
                                查询
                            </button>
                            <button type="reset" class="pear-btn pear-btn-md" lay-filter="pur-type-reset" lay-submit>
                                <i class="layui-icon layui-icon-refresh"></i>
                                重置
                            </button>
                        </div>
                        <div class="layui-form-item">
                            <span style="float:left">
                            </span>
                            <span style="float:right">
                                <i class="layui-icon layui-icon-next" id="leftbtn"></i>
                            </span>

                        </div>
                    </form>
                </div>
                <div class="layui-card-body">
                    <table id="pur-type-table" lay-filter="pur-type-table"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md6" id="rightbox">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form" action="" id="data-from">
                        <div class="layui-form-item">
                            <div class="layui-input-inline" style="width:100px">
                                <input type="text" name="name" placeholder="型号" class="layui-input">
                            </div>
                            <div class="layui-input-inline" style="width:100px">
                                <input type="text" name="supplier_name" placeholder="厂商" class="layui-input">
                            </div>
                            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit
                                lay-filter="pur-data-query">
                                <i class="layui-icon layui-icon-search"></i>
                                查询
                            </button>
                            <button type="reset" class="pear-btn pear-btn-md" lay-filter="pur-data-reset" lay-submit>
                                <i class="layui-icon layui-icon-refresh"></i>
                                重置
                            </button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body">
                    <img src="/static/images/empty.svg" class="empty"
                        style="margin-top: 50px;margin-left: 220px;margin-bottom: 80px;" width="184" height="152">
                    <div class="layui-form-item">
                        <i class="layui-icon layui-icon-prev" id="rightbtn"></i>
                        <span id="objname"></span>
                    </div>
                    <table id="pur-data-table" lay-filter="pur-data-table"></table>
                </div>
            </div>
        </div>
    </div>

</body>
<script type="text/html" id="pur-type-toolbar">
		
	</script>

<script type="text/html" id="pur-type-bar">
        <button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="details">
	        <i class="layui-icon layui-icon-transfer"></i>
	    </button>
	</script>

<script type="text/html" id="pur-type-enable"></script>

<script type="text/html" id="pur-data-toolbar">
	</script>

<script type="text/html" id="pur-data-bar"></script>

<script type="text/html" id="pur-data-enable"></script>
<script src="../config.js"></script>
<script src="/static/layui/layui.js"></script>
<script src="/static/ui/ui.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'upload'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let req = _req();
        let purId = req.id;
        let MODULE_PATH = "./";
        let upload = layui.upload;

        let typeCode;
        let objname;

        let cols = [
            [
                {
                    title: 'ID',
                    field: 'id',
                    minWidth: 60,
                    fixed: 'left'
                },
                {
                    title: '编号',
                    field: 'no',
                    minWidth: 60
                },
                {
                    title: '名称',
                    field: 'name',
                    align: 'center',
                    minWidth: 120,
                    totalRowText: '预算总计'
                },
                {
                    title: '数量',
                    field: 'num',
                    align: 'center',
                    minWidth: 60
                },
                {
                    title: '单价',
                    field: 'price',
                    align: 'center',
                    minWidth: 80
                },
                {
                    title: '费用',
                    field: 'all_price',
                    align: 'center',
                    minWidth: 120,
                    totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'
                },
                {
                    title: '说明',
                    field: 'remark',
                    minWidth: 200,
                    align: 'center'
                },
                {
                    title: '占比',
                    field: 'per',
                    align: 'center',
                    minWidth: 90
                },
                {
                    title: '操作',
                    toolbar: '#pur-type-bar',
                    align: 'center',
                    fixed: 'right',
                    width: 100
                }
            ]
        ];

        let dataCols = [
            [
                {
                    title: 'ID',
                    field: 'id',
                    minWidth: 60,
                    fixed: 'left'
                },
                {
                    title: '型号',
                    field: 'name',
                    align: 'center',
                    minWidth: 120
                },
                {
                    title: '说明',
                    field: 'desc',
                    align: 'center',
                    minWidth: 150
                },
                {
                    title: '厂商',
                    field: 'supplier_name',
                    align: 'center',
                    minWidth: 100,
                    totalRowText: '单项总计'
                },
                {
                    title: '单价',
                    field: 'price',
                    align: 'center',
                    minWidth: 80
                },
                {
                    title: '数量',
                    field: 'num',
                    align: 'center',
                    minWidth: 60
                },
                {
                    title: '总价',
                    field: 'all_price',
                    align: 'center',
                    minWidth: 150,
                    totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'
                },
                {
                    title: '占比',
                    field: 'per',
                    align: 'center',
                    minWidth: 90
                },
                {
                    title: '备注',
                    field: 'remark',
                    align: 'center',
                    minWidth: 300
                }
            ]
        ];

        table.render({
            elem: '#pur-type-table',
            url: apiUrl + 'purchase/detail?pid=0&pur_id=' + purId,
            headers: getHeader(),
            parseData: function (res) {
                //console.log(res)
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.count, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            },
            page: true,
            totalRow: true,
            limit: 100,
            limits: [100, 200, 300, 400, 500, 1000],
            cols: cols,
            skin: 'line',
            height: 'full-148',
            toolbar: '#pur-type-toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports']
        });

        window.renderData = function (pid) {

            typeCode = pid;
            $(".empty").hide();

            table.render({
                elem: '#pur-data-table',
                //url: "../../libs/data/dictData.json",
                url: apiUrl + 'purchase/detail?pid=' + pid + '&pur_id=' + purId,
                headers: getHeader(),
                parseData: function (res) {
                    //console.log(res)
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.data.count, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                },
                page: true,
                totalRow: true,
                limit: 100,
                limits: [100, 200, 300, 400, 500, 1000],
                height: 'full-148',
                cols: dataCols,
                skin: 'line',
                toolbar: '#pur-data-toolbar',
                defaultToolbar: [{
                    title: '刷新',
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'print', 'exports'],
                done: () => {
                    upload.render({
                        elem: '#importTwo', //绑定元素
                        url: apiUrl + 'purchase/import?type=two&pur_id=' + purId + '&pid=' + pid, //上传接口
                        headers: getHeader(),
                        exts: 'xlsx',
                        field: 'file',
                        accept: 'file',
                        done: function (res) {
                            //上传完毕回调
                            console.log(res)
                            layer.msg('导入成功')
                            table.reload('pur-data-table');
                        },
                        error: function () {
                            //请求异常回调
                            layer.msg('导入失败', { icon: 2, time: 1000 })
                        }
                    });

                }
            });
            $('#objname').text(objname)

        }

        table.on('tool(pur-type-table)', function (obj) {
            if (obj.event === 'remove') {
                window.removeType(obj);
            } else if (obj.event === 'edit') {
                window.editType(obj);
            } else if (obj.event === 'details') {
                objname = obj.data.name;
                window.renderData(obj.data['id'])
            }
        });

        table.on('toolbar(pur-type-table)', function (obj) {
            if (obj.event === 'add') {
                window.addType();
            } else if (obj.event === 'refresh') {
                window.refreshType();
            }
            // else if (obj.event === 'import') {
            //     window.importType();
            // }
            else if (obj.event === 'del') {
                //layer.msg("批量删除")
                window.delType();
            }
        });





        window.refreshType = function () {
            table.reload('pur-type-table');
        }


      

        table.on('tool(pur-data-table)', function (obj) {
            if (obj.event === 'remove') {
                window.removeData(obj);
            } else if (obj.event === 'edit') {
                window.editData(obj);
            } else if (obj.event === 'details') {
                window.details(obj);
            }
        });

        table.on('toolbar(pur-data-table)', function (obj) {
            if (obj.event === 'add') {
                window.addData(obj);
            }
            // else if (obj.event === 'refresh') {
            //     window.refreshData(obj);
            // } 
            // else if (obj.event === 'batchRemove') {
            //     layer.msg("批量删除")
            // }
            else if (obj.event === 'del') {
                //layer.msg("批量删除")
                window.delData(obj);
            }
        });


        form.on('submit(pur-type-query)', function (data) {
            table.reload('pur-type-table', {
                where: {
                    param: $('#type-from').serialize()
                },
                page: {
                    curr: 1
                }
            })
            return false;
        });
        form.on('submit(pur-data-query)', function (data) {
            table.reload('pur-data-table', {
                where: {
                    param: $('#data-from').serialize()
                },
                page: {
                    curr: 1
                }
            })
            return false;
        });
        form.on('submit(pur-type-reset)', function (data) {
            table.reload('pur-type-table', {
                where: {
                    param: ''
                },
                page: {
                    curr: 1
                }
            });
            return false;
        })
        form.on('submit(pur-data-reset)', function (data) {
            table.reload('pur-data-table', {
                where: {
                    param: ''
                },
                page: {
                    curr: 1
                }
            });
            return false;
        })

        window.refreshData = function () {
            table.reload('pur-data-table');
        }
    
      
        $('#leftbtn').click(() => {
            $('#leftbox').toggleClass('layui-col-md6')
            $('#rightbox').toggle()
            $('#leftbtn').toggleClass('layui-icon-next').toggleClass('layui-icon-prev')
            table.reload('pur-type-table');
        })
        $('#rightbtn').click(() => {
            $('#rightbox').toggleClass('layui-col-md6')
            $('#leftbox').toggle()
            $('#rightbtn').toggleClass('layui-icon-next').toggleClass('layui-icon-prev')
            //table.reload('pur-type-table');
        })
        
    })
</script>

</html>